<template>
	<div>
		<el-form-item label="一级分类" prop="supplierId">
			<el-select size="small" v-model="primaryCategory" placeholder="一级分类" filterable clearable>
				<el-option v-for="item in primaryCategoryList" :key="item.id" :label="item.categoryName"
					:value="item.id">
				</el-option>
			</el-select>
		</el-form-item>
		<el-form-item label="二级分类" prop="supplierId">
			<el-select size="small" v-model="secondaryCategory" placeholder="二级分类" filterable clearable>
				<el-option v-for="item in secondaryCategoryList" :key="item.id" :label="item.categoryName"
					:value="item.id">
				</el-option>
			</el-select>
		</el-form-item>
		<el-form-item label="三级分类" prop="supplierId">
			<el-select size="small" v-model="tertiaryCategory" placeholder="三级分类" filterable clearable>
				<el-option v-for="item in tertiaryCategoryList" :key="item.id" :label="item.categoryName"
					:value="item.id">
				</el-option>
			</el-select>
		</el-form-item>
	</div>
</template>

<script>
	import { queryGodCategoryZtreeAsyn } from "@/api/admin.api";
	export default {
		name: "thirdSelect",
		data() {
			return {
				primaryCategory: undefined,
				secondaryCategory: undefined,
				tertiaryCategory: undefined,
				primaryCategoryList: [],
				secondaryCategoryList: [],
				tertiaryCategoryList: []
			}
		},
		watch: {
			primaryCategory(value) {
				if (value == "" || value == undefined) {
					this.secondaryCategory = undefined;
					this.secondaryCategoryList = [];
					this.tertiaryCategory = undefined;
					this.tertiaryCategoryList = [];
				} else {
					queryGodCategoryZtreeAsyn(value, "").then(res => {
						this.secondaryCategoryList = res;
					})
				}
				this.changeValue();
			},
			secondaryCategory(value) {
				if (value == "" || value == undefined) {
					this.tertiaryCategory = undefined;
					this.tertiaryCategoryList = [];
				} else {
					queryGodCategoryZtreeAsyn(value, "").then(res => {
						this.tertiaryCategoryList = res;
					})
				}
				this.changeValue();
			},
			tertiaryCategory(value) {
				this.changeValue();
			},
		},
		mounted() {
			this.initList();
		},
		methods: {
			initList() {
				queryGodCategoryZtreeAsyn("", "").then(res => {
					this.primaryCategoryList = res
				})
			},
			changeValue() {
				const params = {
					primaryCategory: this.primaryCategory,
					secondaryCategory: this.secondaryCategory,
					tertiaryCategory: this.tertiaryCategory,
				}
				this.$emit("change", params)
			}
		}
	}
</script>

<style>
</style>
